<template>
  <view class="oc-loading">
    <!-- #ifdef H5 -->
    <svg viewBox="0 0 84 24" :fill="color || '#1D6AFF'">
      <circle cx="18" cy="12" r="6"></circle>
      <circle cx="18" cy="12" r="6"></circle>
      <circle cx="42" cy="12" r="6"></circle>
      <circle cx="66" cy="12" r="6"></circle>
    </svg>
    <!-- #endif -->
    <!-- #ifndef H5 -->
    <!-- <image alt="image" src="@images/icons/loading.png" mode="heightFix"></image> -->
    <!-- #endif -->
  </view>
</template>

<script setup lang="ts">
defineProps<{
  color?: string
}>()
</script>

<style lang="scss" scoped>
.oc-loading {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999999;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  align-self: stretch;
  box-sizing: border-box;
}

/* #ifdef H5 */

@-webkit-keyframes loading1 {
  0% {
    -webkit-transform: scale(0.4) translateX(28.57%);
    -ms-transform: scale(0.4) translateX(28.57%);
    transform: scale(0.4) translate(28.57%);
    opacity: 0.3;
  }

  to {
    -webkit-transform: scale(1) translateX(0%);
    -ms-transform: scale(1) translateX(0%);
    transform: scale(1) translate(0);
    opacity: 1;
  }
}

@keyframes loading1 {
  0% {
    -webkit-transform: scale(0.4) translateX(28.57%);
    -ms-transform: scale(0.4) translateX(28.57%);
    transform: scale(0.4) translate(28.57%);
    opacity: 0.3;
  }

  to {
    -webkit-transform: scale(1) translateX(0%);
    -ms-transform: scale(1) translateX(0%);
    transform: scale(1) translate(0);
    opacity: 1;
  }
}

@-webkit-keyframes loading2 {
  0% {
    -webkit-transform: translateX(0%);
    -ms-transform: translateX(0%);
    transform: translate(0);
  }

  to {
    -webkit-transform: translateX(28.57%);
    -ms-transform: translateX(28.57%);
    transform: translate(28.57%);
  }
}

@keyframes loading2 {
  0% {
    -webkit-transform: translateX(0%);
    -ms-transform: translateX(0%);
    transform: translate(0);
  }

  to {
    -webkit-transform: translateX(28.57%);
    -ms-transform: translateX(28.57%);
    transform: translate(28.57%);
  }
}

@-webkit-keyframes loading3 {
  0% {
    -webkit-transform: scale(1) translateX(0%);
    -ms-transform: scale(1) translateX(0%);
    transform: scale(1) translate(0);
    opacity: 1;
  }

  to {
    -webkit-transform: scale(0.4) translateX(-28.57%);
    -ms-transform: scale(0.4) translateX(-28.57%);
    transform: scale(0.4) translate(-28.57%);
    opacity: 0.3;
  }
}

@keyframes loading3 {
  0% {
    -webkit-transform: scale(1) translateX(0%);
    -ms-transform: scale(1) translateX(0%);
    transform: scale(1) translate(0);
    opacity: 1;
  }

  to {
    -webkit-transform: scale(0.4) translateX(-28.57%);
    -ms-transform: scale(0.4) translateX(-28.57%);
    transform: scale(0.4) translate(-28.57%);
    opacity: 0.3;
  }
}
.oc-loading svg {
  // margin-left: 50vw;
  height: 100%;
  max-height: 1.25rem;
  max-width: 80%;
  stroke: transparent;
}

.oc-loading circle {
  -webkit-transform-origin: center;
  -ms-transform-origin: center;
  transform-origin: center;
  will-change: transform;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  &:nth-child(1) {
    -webkit-animation: loading1 0.6s infinite;
    animation: loading1 0.6s infinite;
  }
  &:nth-child(2) {
    -webkit-animation: loading2 0.6s infinite;
    animation: loading2 0.6s infinite;
  }
  &:nth-child(3) {
    -webkit-animation: loading2 0.6s infinite;
    animation: loading2 0.6s infinite;
  }
  &:nth-child(4) {
    -webkit-animation: loading3 0.6s infinite;
    animation: loading3 0.6s infinite;
  }
}
/* #endif */

/* #ifndef H5 */

@-webkit-keyframes loading {
  0% {
    -webkit-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  to {
    -webkit-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes loading {
  0% {
    -webkit-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  to {
    -webkit-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
image {
  display: block;
  margin: 0 auto;
  height: 80px;
  max-height: 60%;
  -webkit-transform-origin: center;
  -ms-transform-origin: center;
  transform-origin: center;
  will-change: transform;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  animation: loading 1s infinite;
}
/* #endif */
</style>
